<template>
	<!-- 自定义导航栏 -->
	<CustomNavBar title="伙伴圈,在这里可以看伙伴发的帖子" />
	<view v-for="(post, index) in postList" :key="post.id" class="post-card">
		<up-card :title="post.username" :thumb="post.avatarUrl" thumb-size="60" thumb-radius="30" :thumb-border="true"
			:foot-border-top="false" :head-border-bottom='false'>
			<template #body>
				<!-- 描述部分 -->
				<view class="post-content" @click="doPostInfo(post.id)">
					{{ post.content }}
				</view>
			</template>
			<template #foot>
				<view
					style="display: flex; justify-content: flex-end; align-items: center; width: 50%;margin-left: auto;">
					<up-button iconColor="#909399" @click="preAddComment(post.id)" icon='chat-fill'
						style="margin-right: 10rpx;">评论</up-button>
					<up-button :iconColor="post.thumb ? '#ee0a24' : '#909399'" @click="doThumb(index,post.id)"
						icon='thumb-up-fill' style="margin-right: 10rpx;">{{post.thumbNum}}</up-button>
					<up-button v-if="post.userId === currentUser?.id" iconColor="#ee0a24" @click="doDeletePost(post.id)"
						icon='trash'>删除</up-button>
				</view>
			</template>
		</up-card>

		<!-- 评论列表 -->
		<view v-for="comment in post.postCommentList" :key="comment.id" class="comment-item">
			<up-cell :title="comment.username" :icon="comment.avatarUrl" :label="comment.content" :is-link="false" />
		</view>

		<!-- 分割线 -->
		<up-divider lineColor="#1989fa" class="divi der-custom" />
	</view>

	<!-- 空状态组件 -->
	<up-empty v-if="!postList || postList.length < 1" description="无符合的帖子" />

	<up-popup :show="show" mode="bottom" @close="doAddCommentCancel">
		<up-form @submit.prevent="doAddComment">
			<up-form-item borderBottom labelWidth='120rpx' style="padding-left: 30rpx;">
				<up-textarea v-model="comment" placeholder="请输入评论" count :maxlength='200'></up-textarea>
			</up-form-item>

			<view style="margin: 16px;">
				<up-button type="primary" @click="doAddComment">
					发送
				</up-button>
			</view>
		</up-form>
	</up-popup>
	<view class='iconBox'>
		<up-icon name="plus" color="#fff" size="28" @click="doPostAdd"></up-icon>
	</view>
</template>

<script setup lang="ts">
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import { onMounted, ref, watchEffect } from 'vue';
	import myAxios from '@/plugins/myAxios'; // 请确保路径正确
	import type { postType } from '@/models/post';
	import { getCurrentUser } from '@/services/user';

	// 当前用户信息
	const currentUser = ref('');
	// 评论内容
	const comment = ref('');
	// 帖子列表，包含初始的假数据
	const postList = ref<postType[]>([
		{
			id: 1,
			username: 'Alice',
			avatarUrl: 'https://img0.baidu.com/it/u=3039308531,3899503175&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
			content: '这是第一条帖子内容',
			thumb: false,
			thumbNum: 10,
			userId: 101,
			postCommentList: [
				{
					id: 1001,
					username: 'Bob',
					avatarUrl: 'https://img0.baidu.com/it/u=3039308531,3899503175&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
					content: '这是一个评论',
				},
				{
					id: 1002,
					username: 'Charlie',
					avatarUrl: 'https://example.com/avatar3.png',
					content: '另一个评论内容',
				},
			],
		},
		{
			id: 2,
			username: 'David',
			avatarUrl: 'https://example.com/avatar4.png',
			content: '这是第二条帖子内容',
			thumb: true,
			thumbNum: 5,
			userId: 102,
			postCommentList: [
				{
					id: 1003,
					username: 'Eve',
					avatarUrl: 'https://example.com/avatar5.png',
					content: '很有趣的帖子！',
				},
			],
		},
		{
			id: 3,
			username: 'Frank',
			avatarUrl: 'https://example.com/avatar6.png',
			content: '第三条帖子内容示例',
			thumb: false,
			thumbNum: 8,
			userId: 103,
			postCommentList: [],
		},
		// 可以根据需要添加更多的帖子
	]);

	// 控制评论弹窗的显示
	const show = ref(false);
	// 当前正在添加评论的帖子 ID
	const addCommentPost = ref<number>(0);
	// 当前页码
	const currentPage = ref<number>(1);

	/**
	 * 删除帖子
	 */
	const doDeletePost = async (id : number) => {
		try {
			const res = await myAxios.post("/post/delete", { id });
			if (res?.code === 0) {
				uni.showToast({ title: '删除成功', icon: 'success' });
				// 更新帖子列表，移除已删除的帖子
				postList.value = postList.value.filter(post => post.id !== id);
			} else {
				uni.showToast({ title: '删除失败' + (res.description ? `,${res.description}` : ''), icon: 'none' });
			}
		} catch (error) {
			uni.showToast({ title: '网络错误，删除失败', icon: 'none' });
		}
	};

	/**
	 * 获取帖子的列表
	 */
	const listPost = async () => {
		try {
			const res = await myAxios.get("/post/list", {
				params: {
					pageNum: currentPage.value,
					pageSize: 5,
				}
			});
			if (res?.code === 0 && res.data) {
				postList.value = res.data;
			} else {
				uni.showToast({ title: '加载帖子失败' + (res.description ? `,${res.description}` : ''), icon: 'none' });
			}
		} catch (error) {
			uni.showToast({ title: '网络错误，加载失败', icon: 'none' });
		}
	};

	/**
	 * 添加帖子
	 */
	const doPostAdd = () => {
		uni.navigateTo({
			url: '/pages/forum/add' // 请确保路径正确
		});
	};

	/**
	 * 预先添加评论，显示评论弹窗
	 */
	const preAddComment = (postId : number) => {
		show.value = true;
		addCommentPost.value = postId;
	};

	/**
	 * 给帖子评论
	 */
	const doAddComment = async () => {
		if (!comment.value.trim()) {
			uni.showToast({ title: '评论内容不能为空', icon: 'none' });
			return;
		}
		try {
			const res = await myAxios.post("/post/addComment", {
				content: comment.value,
				postId: addCommentPost.value,
			});
			if (res?.code === 0) {
				uni.showToast({ title: '评论成功', icon: 'success' });
				doAddCommentCancel();
				// 可选：重新加载帖子列表或手动更新评论列表
				// listPost();
				const post = postList.value.find(p => p.id === addCommentPost.value);
				if (post) {
					post.postCommentList.push({
						id: Date.now(), // 假设使用时间戳作为 ID
						username: currentUser.value.username, // 假设 currentUser 有 username
						avatarUrl: currentUser.value.avatarUrl, // 假设 currentUser 有 avatarUrl
						content: comment.value,
					});
				}
			} else {
				uni.showToast({ title: '评论失败' + (res.description ? `,${res.description}` : ''), icon: 'none' });
			}
		} catch (error) {
			uni.showToast({ title: '网络错误，评论失败', icon: 'none' });
		}
	};

	/**
	 * 关闭评论弹窗
	 */
	const doAddCommentCancel = () => {
		comment.value = '';
		show.value = false;
	};

	/**
	 * 点赞
	 */
	const doThumb = async (index : number, postId : number) => {
		try {
			const res = await myAxios.post("/post_thumb/", { postId });
			if (res?.code === 0) {
				// 返回为1表示点赞，返回为-1表示取消点赞
				if (res.data === 1) {
					postList.value[index].thumbNum += 1;
				} else {
					postList.value[index].thumbNum -= 1;
				}
				postList.value[index].thumb = !postList.value[index].thumb;
			} else {
				uni.showToast({ title: '点赞失败' + (res.description ? `,${res.description}` : ''), icon: 'none' });
			}
		} catch (error) {
			uni.showToast({ title: '网络错误，点赞失败', icon: 'none' });
		}
	};

	/**
	 * 跳转帖子详情
	 */
	const doPostInfo = (id : number) => {
		uni.navigateTo({
			url: `/pages/forum/detail?id=${id}` // 请确保路径正确
		});
	};

	/**
	 * 初始化函数，挂载时执行
	 */
	onMounted(async () => {
		await listPost();
		const user = await getCurrentUser();
		currentUser.value = user || {};
	});

	/**
	 * 监听 addCommentPost 的变化（可选）
	 */
	watchEffect(() => {
		// 目前没有需要响应的逻辑，可以删除或保留
	});
</script>


<style lang='scss' scoped>
	.iconBox {
		position: fixed;
		/* 固定定位 */
		bottom: 20px;
		/* 距离页面底部 */
		right: 20px;
		/* 距离页面右侧 */
		z-index: 999;
		/* 确保在最上层 */
		width: 60px;
		/* 宽度 */
		height: 60px;
		/* 高度 */
		display: flex;
		/* 使用 flex 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		background-color: #49a1ff;
		/* 背景色 */
		border-radius: 50%;
		/* 圆形按钮 */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		border: 1px solid #e5e5e5;
		/* 边框 */
	}

	.iconBox:active {
		transform: scale(0.95);
		/* 点击时缩小效果 */
		transition: transform 0.1s ease-in-out;
	}
</style>